<template>
	<div id="slider">
		<swiper ref="mySwiper" :class="[cname]" :options="options" :not-next-tick="options.notNextTick">
			<swiper-slide v-for="(item, key) in banners" :key="key">
				<router-link :to="item.href"><img :src="item.src" alt="" /></router-link>
			</swiper-slide>

			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
	props:{
		options: {
			type:Object,
			default(){
				return {  //prop传对象 必须以函数return返回 对象
					pagination: {
						el: '.swiper-pagination'
					},
					autoplay: true,
					loop: true,
					notNextTick:false   //预防 预加载队列出错问题
				}
			}
		},
		cname:{
			type:String,
			default:''
		},
		banners:{
			type:Array,
			default(){
				return []  // [{href:'',src:''}]
			}
		}
	}
}
</script>